<template>
	<div>
		<div v-show="qh == true">
			<p style="width: 96%;margin: 0 auto;line-height: 60px;font-size: 18px;font-weight: bold;border-bottom: 1px solid gray;">
				我的购物车清单
				
			</p>
			<el-table
			    :data="typelist"
			    border
			    style="width: 96%;margin: 10px auto 0;">
				
				<el-table-column
				  label="商品名称"
				  width="180">
				  <template #default='scope'>
					  <img :src="`${$Imgurl}/api/public/showImg/${scope.row.book.picture}`" style="width: 80px;height: 80px;">
				  </template>
				</el-table-column>
				
			    <el-table-column
			      prop="book.name"
			      label="商品名称"
			      width="580">
			    </el-table-column>
				
			    <el-table-column
			      prop="book.price"
			      label="商品价钱"
			      width="180">
			    </el-table-column>
				
				<el-table-column
				  label="商品数量"
				  width="300">
				  <!-- <template #default='scope'>
					  {{scope.row.num}}
				  </template> -->
				  <template #default='scope'>
					  <el-input-number
					      v-model="scope.row.cart.num"
					      :min="1"
					      :max="100"
					      controls-position="right"
					    />
				  </template>
				</el-table-column>
				
				<el-table-column
				  label="商品总价"
				  width="250">
				  <template #default='scope'>
					  {{scope.row.book.price*scope.row.cart.num}}
				  </template>
				</el-table-column>
				
				<el-table-column
				  label="复选框"
				  width="250">
				  <template #default='scope'>
					  <el-checkbox
					        size="large"
					        border
							v-model="scope.row.show"
					  ></el-checkbox>
				  </template>
				</el-table-column>
				
				<el-table-column
				  label="编号"
				  width="50">
				  <template #default='scope'>
					  {{scope.$index+1}}
				  </template>
				</el-table-column>
				
			  </el-table>
			  
			  <div  style="border-top: 8px solid gray;width: 96%;margin: 0 auto;">
				  <div style="border-bottom: 1px solid black;height: 45px;">
					  <el-button>
						  总价钱:
					  </el-button>
					  {{sum}}
				  </div>
				  <div>
					  <el-button @click="qxd()">
					  	去下单
					  </el-button>
				  </div>
			  </div>
		</div>
		<!--  -->
		<div v-show="qh == false">
			
			<p style="width: 96%;margin: 15px auto 0;line-height: 60px;font-size: 18px;font-weight: bold;border-bottom: 1px solid gray;">
				
			</p>
			<el-table
			    :data="gwc"
			    border
			    style="width: 96%;margin: 10px auto 0;">
				
				<el-table-column
				  label="图片"
				  width="180">
				  <template #default='scope'>
					  <img :src="`${$Imgurl}/api/public/showImg/${scope.row.book.picture}`" style="width: 80px;height: 80px;">
				  </template>
				</el-table-column>
				
			    <el-table-column
			      prop="book.name"
			      label="商品名称"
			      width="580">
			    </el-table-column>
				
			    <el-table-column
			      prop="book.price"
			      label="商品价钱"
			      width="180">
			    </el-table-column>
				
				<el-table-column
				  prop="cart.num"
				  label="商品数量"
				  width="300">
				</el-table-column>
				
				<el-table-column
				  label="商品总价"
				  width="250">
				  <template #default='scope'>
					  {{scope.row.book.price*scope.row.cart.num}}
				  </template>
				</el-table-column>
				
			  </el-table>
			  
			  <div  style="border-top: 8px solid gray;width: 96%;margin: 0 auto;border-bottom: 1px solid gray;">
			  	<div style="border-bottom: 1px solid black;height: 45px;">
			  		<el-button>
			  			总价钱:
			  		</el-button>
			  		{{sums}}
			  	</div>
			  	<div style="border-bottom: 1px solid black;padding-bottom: 10px;">
			  		<div style="display: flex;margin-top: 10px;">
						<el-button type="primary">请输入收货地址</el-button>
						<el-input placeholder="请输入地址" v-model="dz1" />
					</div>
					<div style="display: flex;">
						<el-button type="primary">请输入收货电话</el-button>
						<el-input placeholder="请输入地址" v-model="dz2" />
					</div>
			  	</div>
				<div style="display: flex;line-height: 50px;">
					<div style="width: 50%;text-align: center;">
						<el-button type="warning" @click="cxxz()" v-if="an == true">重新选择</el-button>
						<el-button type="success" v-if="an == false">订单下单成功!,单号:{{ddh}}</el-button>
					</div>
					<div style="width: 50%;text-align: center;">
						<!-- <el-button type="danger" @click="xd()">下单</el-button> -->
						<el-button :plain="true" type="primary" @click="xd()" v-if="an == true" >下单</el-button>
						<el-button type="danger" v-if="an == false">去付款</el-button>
					</div>
				</div>
			  </div>
			  
		</div>
	</div>
</template>

<script>
// 拦截器
import instance from '../../ajax/index.js';
// 
import { ElMessage } from 'element-plus';
// 
import { defineComponent, ref } from 'vue'
export default{
	name:'Cart',
	data(){
		return{
			typelist:[],
			qh:true,
			gwc:[],
			dz1:'',		//类型地址1
			dz2:'',		//类型地址2
			typelists:[],
			ddh:'',		//订单号
			an:true,	//按钮
		}
	},
	created() {
		let that = this;
		// 发起get请求，获取数据
		instance.get('/api/fore/cart/findAll').then( (res)=>{
			// 判断状态
			// console.log(res.data.data);
			if(res.status === 200){
				// 向表格渲染数据
				this.typelist = res.data.data;
				for(let i in this.typelist){
					this.typelist[i].show = false;
				}
				console.log(this.typelist);
			}
		} ).catch( (error)=>{
			console.log(error);
		} )
	},
	methods:{
		qxd(){
			for(let index in this.typelist){
				if(this.typelist[index].show == true){
					this.qh = false;
					// this.gwc.push(this.typelist[index]);
					this.gwc.push(this.typelist[index]);
					console.log(this.gwc);
				}
			}
		},
		cxxz(){
			for(let i in this.typelist){
				this.typelist[i].show = false;
			}
			this.qh = true;
		},
		xd(){
			// 备份
			let that = this;
			let arr = [];
			// 判断不能为空
				console.log(that.gwc); 
				// 发起post请求 请求地址 + 提交数据 + 表头配置
				/*
					请求地址：http://127.0.0.1:8093/api/fore/cart/addCart2Order
					提交的数据：this.$qs.stringify( data )
					配置：header对象
				*/
			   // 将提交的数据打包
			   for(let index in that.gwc){
				   let data = {
					   bookid:that.gwc[index].cart.bookid,
					   num:that.gwc[index].cart.num,
					   price:that.gwc[index].book.price,
				   }
				   arr.push(data);
			   }
			   
			   instance.post( '/api/fore/cart/addCart2Order' , JSON.stringify( arr ),{
					// 告知服务器本次请求的方式以及编码格式
					headers : { 'Content-Type' : 'application/json' }
				}).then( (res)=>{
			   		console.log(res);
					
					that.ordid = res.data.data.ordid;
					that.ddh = res.data.data.ordid;
					
					let obj = {
						addr:that.dz1,
						ordid:that.ordid,
						phone:that.dz2,
					}
					console.log(obj);
					instance.post( '/api/fore/ord/addAddr' , JSON.stringify( obj ),{
						// 告知服务器本次请求的方式以及编码格式
						headers : { 'Content-Type' : 'application/json' }
					}).then( (res)=>{
						console.log(res);
						
						ElMessage({
						    message: '订单下单成功!,单号:'+this.ddh,
						    type: 'success',
						})
						
					}).catch( (error)=>{
						console.log(error);
					})
					console.log(arr);
					
			   }).catch( (error)=>{
			   		console.log(error);
			   })
			   console.log(arr);
			   that.an = false;
		}
	},
	computed:{
		sum(){
			let sum = 0;
			for(let index in this.typelist){
				if(this.typelist[index].show == true){
					sum += this.typelist[index].book.price * this.typelist[index].cart.num
				}
			}
			return sum;
		},
		sums(){
			let sums = 0;
			for(let index in this.gwc){
				sums += this.gwc[index].book.price * this.gwc[index].cart.num
			}
			return sums;
		}
	}
}
</script>

<style>
</style>
